<template>
  <div class="rabking">
    <div class="rabking_left">
      <ul ref="qwe">
        <li v-for="(v,i) in rabkingList" :key="i">
          <h1 v-if="i<1" >云音乐特色榜</h1>
          <h2 v-if="i<5&&i>3">全球媒体榜</h2>
          <router-link :to="`/ranking/${v.id}`" :class="{show:i>num-1&&i<num+1}" class="rankings" @click.native="switchnum(i)">
            <div class="rabking_a"><img :src="v.coverImgUrl"></div>
            <div class="rabking_b"><span>{{v.name}}</span><span>{{v.updateFrequency}}</span></div>
          </router-link>
          </li>
      </ul>
    </div>
    <div class="rabking_right">
      <router-view :key="$route.fullPath"></router-view>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
    computed: {
    ...mapState(["num"]),
  },
  data() {
    return {
      // 排行榜数据
      rabkingList:{}
    };
  },
  //
  methods: {
    ...mapMutations(["switchnum"]),
    // 获取排行榜数据
    getRankingData() {
      axios.get(`http://127.0.0.1:3000/toplist`).then((res) => {
        this.rabkingList = res.data.list
      });
    },
  },
  //
  created() {
    this.getRankingData();
  },
};
</script>

<style scoped>
.rabking {
  width: 980px;
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.rabking_left {
  width: 240px;
  padding-top: 40px;
  border-right: 1px solid #ccc;
}
.rabking_left ul li h1{
  padding: 0 10px 12px 15px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
}
.rabking_left ul li h2{
  padding: 0 10px 12px 15px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    margin-top: 15px;
}
.rabking_left ul li a{
  display: block;
  width: 100%;
  display: flex;
  padding: 10px 0px 10px 20px ;
  z-index: 10;
}
.rabking_left ul li a:hover{
 background: #f4f2f2;
}
.rabking_left ul li a .rabking_a img{
  width: 40px;
  height: 40px;
}
.rabking_left ul li a .rabking_b{
  display: flex;
  flex-direction: column;
    justify-content: space-evenly;
    margin-left: 10px;
}
.rabking_left ul li a .rabking_b span{
  font-size: 12px;
}
.rabking_left ul li a .rabking_b span:nth-child(2){
  color: #999999;
}
.rabking_right {
  width: 740px;
}
.show{
  background: #e6e6e6;
}
</style>